.unlock {
  width: 480rpx;
  height: 132rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 8rpx;
}

.unlockText {
  color: var(--index-subTitle-color);
  font-size: 24rpx;
  font-weight: 500;
  line-height: 28rpx;
  position: absolute;
}
.sliderWrap {
  position: relative;
  align-items: center;
  justify-content: center;
  display: flex;
}
.slider {
  position: relative;
}
.backLeft {
  animation: turnLeft 0.6s ease-in;
}
.backRight {
  animation: turnRight 0.6s ease-in;
}

.sliderIcon {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  top: 0;
}

.arrowContainer {
  display: flex;
  flex-direction: row;
  position: absolute;
}

.arrowLeft {
  width: 14rpx;
  height: 14rpx;
  transform: rotate(45deg);
  border-bottom: 3rpx solid #d9d9d9;
  border-left: 3rpx solid #d9d9d9;
  animation: arrow-animation 1.5s ease-in-out infinite;
}
.arrow {
  width: 14rpx;
  height: 14rpx;
  transform: rotate(45deg);
  border-top: 3rpx solid #d9d9d9;
  border-right: 3rpx solid #d9d9d9;
  opacity: 1;
  animation: arrow-animation 1.5s ease-in-out infinite;
}

.loading {
  width: 50rpx;
  height: 50rpx;
  border: 5rpx solid #f3f3f3;
  border-top: 5rpx solid var(--app-M1);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes arrow-animation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.1;
  }
}

@keyframes turnLeft {
  100% {
    transform: translateX(8rpx);
  }
}

@keyframes turnRight {
  100% {
    transform: translateX(356rpx);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
